<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .rose{
            position: absolute;
            bottom:50px;
            width:100%;
            height:600px;
            background-color:whitesmoke;

            /*溢出的部分隐藏*/
            overflow:hidden;

            /*透视，*/
            perspective: 500px;
            /*transform-style: preserve-3d;*/
            /*从上往下看*/
            perspective-origin: center top;

        }
        .rose .stem{
            /*子绝父绝*/
            position: absolute;
            top:200px;
            left: 50%;
            /*方便的水平居中*/
            transform:translateX(-50%);

            height:100%;
            width:20px;
            /*渐变色*/
            background:linear-gradient(to right,#0f0,#060,#004b00);
        }
        /*叶子*/
        .stem div{
            position:absolute;
            border-radius: 50%;/*正方形圆，长方形椭圆*/
        }
        .rose .stem .leaf1{
            width:100px;
            height:40px;

            top:40px;
            right:20px;
            /*旋转*/
            transform:rotate(30deg);
            /*色彩占比*/
            background: linear-gradient(to right,#0f0 0%,#060 70%,#004b00 100%);
        }

        .rose .stem .leaf2{
            width:100px;
            height:40px;

            top:70px;

            left:20px;

            /*旋转*/
            transform:rotate(-30deg);
            /*色彩占比*/
            background: linear-gradient(to left,#0f0 0%,#060 70%,#004b00 100%);
        }

        /*后面两片叶子*/

        .rose .stem .leaf3{
            width:150px;
            height:50px;

            top:250px;
            right:20px;
            /*旋转*/
            transform:rotate(30deg);
            /*色彩占比*/
            background: linear-gradient(to right,#0f0 0%,#060 70%,#004b00 100%);
        }

        .rose .stem .leaf4{
            width:150px;
            height:50px;

            top:280px;
            left:20px;
            /*旋转*/
            transform:rotate(-30deg);
            /*色彩占比*/
            background: linear-gradient(to right,#0f0 0%,#060 70%,#004b00 100%);
        }


        .animate{
            animation:scale 2s linear forwards;

            /*设置中心点*/
            transform-origin: center bottom;

        }

        /*缩放动画*/
        @keyframes scale {
            from{
                transform:scale(0);
            }
            to{
                transform:scale(1);
            }

        }

        /*最外层10个花瓣*/
        .rose .petal{
            position: absolute;
            left:50%;
          /*  transform:translateX(-50%);不能这样，因为后面会覆盖*/
            margin-left: -50px;
            top:50px;
            width:100px;
            height:100px;
            background: linear-gradient(#ff3631,#d30a04 20%,#d30a23);
            border-radius: 35% 35% 50% 50%;
        }
        .rose .p10{
            transform:rotateX(-30deg) rotateY(-12deg) translateZ(85px);
            z-index:910;
        }
        .rose .p11{
            transform:rotateX(-30deg) rotateY(-48deg) translateZ(85px);
            z-index:909;
        }
        .rose .p12{
            transform:rotateX(-30deg) rotateY(-84deg) translateZ(85px);
            z-index:908;
        }

        .rose .p13{
            transform:rotateX(-30deg) rotateY(-120deg) translateZ(85px);
            z-index:10;
        }
        .rose .p14{
            transform:rotateX(-30deg) rotateY(-156deg) translateZ(85px);
            z-index:9;
        }
        .rose .p15{
            transform:rotateX(-30deg) rotateY(-192deg)  translateZ(85px)
        }
        .rose .p16{
            transform:rotateX(-30deg) rotateY(-228deg)  translateZ(85px);
            z-index:10;
        }
        .rose .p17{
            transform:rotateX(-30deg) rotateY(-264deg)  translateZ(85px);
            z-index:20;
        }
        .rose .p18{
            transform:rotateX(-30deg) rotateY(-300deg)  translateZ(85px);
            z-index:909;
        }
        .rose .p19{
            transform:rotateX(-30deg) rotateY(-336deg)  translateZ(85px);
            z-index:910;
        }
        /*倒数第二层的八个花瓣*/
        .rose .p20{
            transform:rotateX(-25deg) rotateY(0deg) translateZ(60px) scale(0.9);
            z-index:810;
        }

        .rose .p21{
            transform:rotateX(-25deg) rotateY(-45deg) translateZ(60px) scale(0.9);
            z-index:809;
        }
        .rose .p22{
            transform:rotateX(-25deg) rotateY(-90deg) translateZ(60px) scale(0.9);
            z-index:808;
        }
        .rose .p23{
            transform:rotateX(-25deg) rotateY(-135deg) translateZ(60px) scale(0.9);
            z-index:20;
        }
        .rose .p24{
            transform:rotateX(-25deg) rotateY(-180deg) translateZ(60px) scale(0.9);
            z-index:19;
        }
        .rose .p25{
            transform:rotateX(-25deg) rotateY(-225deg) translateZ(60px) scale(0.9);
            z-index:20;
        }
        .rose .p26{
            transform:rotateX(-25deg) rotateY(-270deg) translateZ(60px) scale(0.9);
            z-index:809;
        }
        .rose .p27{
            transform:rotateX(-25deg) rotateY(-315deg) translateZ(60px) scale(0.9);
            z-index:810;
        }
        /*倒数第三层的六个花瓣*/
        .rose .p30{

            transform:rotateX(-20deg) rotateY(-30deg) translateZ(60px) scale(0.8);
            z-index:709;
        }
        .rose .p31{

            transform:rotateX(-20deg) rotateY(-90deg) translateZ(60px) scale(0.8);
            z-index:709;
        }
        .rose .p32{

            transform:rotateX(-20deg) rotateY(-150deg) translateZ(60px) scale(0.8);
            z-index:30;
        }
        .rose .p33{

            transform:rotateX(-20deg) rotateY(-210deg) translateZ(60px) scale(0.8);
            z-index:31;
        }
        .rose .p34{

            transform:rotateX(-20deg) rotateY(-270deg) translateZ(50px) scale(0.8);
            z-index:709;
        }
        .rose .p30{

            transform:rotateX(-20deg) rotateY(-330deg) translateZ(50px) scale(0.8);
            z-index:710;
        }



    </style>
</head>
<body>
<div class="rose animate">
    <!--花茎-->
    <div class="stem">
        <!--4片叶子-->
        <div class="leaf1"></div>
        <div class="leaf2"></div>
        <div class="leaf3"></div>
        <div class="leaf4"></div>
    </div>
    <!--最外层的十个花瓣-->
    <div class="petal p10"></div>
    <div class="petal p11"></div>
    <div class="petal p12"></div>
    <div class="petal p13"></div>
    <div class="petal p14"></div>
    <div class="petal p15"></div>
    <div class="petal p16"></div>
    <div class="petal p17"></div>
    <div class="petal p18"></div>
    <div class="petal p19"></div>

    <!--倒数第二层的八个花瓣-->

    <div class="petal p20"></div>
    <div class="petal p21"></div>
    <div class="petal p22"></div>
    <div class="petal p23"></div>
    <div class="petal p24"></div>
    <div class="petal p25"></div>
    <div class="petal p26"></div>
    <div class="petal p27"></div>

    <!--倒数第三层的六个花瓣-->

    <div class="petal p30"></div>
    <div class="petal p31"></div>
    <div class="petal p32"></div>
    <div class="petal p33"></div>
    <div class="petal p34"></div>
    <div class="petal p35"></div>
</div>
</body>
</html>